<template>
	<view class="container">
		<view class="wechat-app">
			<view class="header">
				<image class="image" src="@/xj_user/static/account.png" v-if="!oauth" />
				<image class="image" :src="oauth.headimgurl" v-else />
			</view>
		</view>
		<view class="fetch-user" v-if="!bind">
			<view class="auth-title">申请获取以下权限</view>
			<view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
			<view class="login-btn">
				<button class="button btn-normal" @click.stop="toAuth">授权登录</button>
			</view>
		</view>
		<view class="bind-phone" v-else>
			<view class="auth-title">申请获取以下权限</view>
			<view class="auth-subtitle">获得你的手机号</view>
			<view class="login-btn">
				<button class="button btn-normal" @click="onEmitSuccess">绑定手机号</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/**
				 * 授权登录的阶段：
				 * 1. 授权用户信息 - 获取 openId 的过程
				 * 2. 绑定手机号
				 */
				bind: false,

				/**
				 * 获取到的授权信息
				 */
				oauth: null,
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		created() {},
		/**
		 * 加载此页面时才执行
		 */
		mounted() {
			let token = this.$route.query.token;
			if (token) {
				this.doAuth(token);
			}
			//else {
			//	this.toAuth();
			//}
		},
		methods: {
			doAuth: function(token) {
				console.log(token);
				this.$store.dispatch('H5WxLogin', {
					token: token
				}).then(result => {
					console.log("登录成功，", result)

					// 显示授权信息
					this.oauth = result.oauth;

					// 一键登录成功
					this.$app.toast('登录成功')

					// 跳转回原页面
					setTimeout(() => {
						this.onNavigateBack(1)
					}, 1000)
				}).catch(oauth => {
					console.log("登录失败，", oauth)
					if (oauth && oauth.openId) {
						// this.$app.toast('授权成功，请填写手机')
						this.bind = true;
						this.oauth = oauth;
					} else {
						this.$app.error('授权失败，请重新授权！');
						this.bind = false;
						this.oauth = null;
					}
				});
			},
			toAuth: function() {
				let api = this.$settings.api;
				let appid = this.$settings.appId;
				let to = api + '/api/user/login/wechat/oauth/' + appid
				console.log(to)
				window.location = to
			},

			/**
			 * 授权成功，但是需要获取用户的手机号
			 */
			onEmitSuccess: function() {
				this.$emit('success', {
					name: this.oauth.nickname,
					headimg: this.oauth.headimgurl,
					phone: '',
					appId: this.oauth.appId,
					openId: this.oauth.openId,
					unionId: this.oauth.unionId || '',
					account: 'Wechat'
				})
			},

			/**
			 * 登录成功-跳转回原页面
			 */
			onNavigateBack(delta) {
				let to = this.$store.getters.to;
				console.log('跳转页面：', to)
				if (to && to.route) {
					this.$app.redirectTo(to.route, to.param)
				} else {
					this.$app.redirectTo('pages/index/index')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 60rpx;
		font-size: 32rpx;
		background: #fff;
		min-height: 100vh;

		.wechat-app {
			padding: 80rpx 0 48rpx;
			border-bottom: 1rpx solid #e3e3e3;
			margin-bottom: 72rpx;
			text-align: center;

			.header {
				width: 190rpx;
				height: 190rpx;
				border: 4rpx solid #fff;
				margin: 0 auto 0;
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 2rpx 0 10rpx rgba(50, 50, 50, 0.3);

				.image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}

		.auth-title {
			color: #585858;
			font-size: 34rpx;
			margin-bottom: 40rpx;
		}

		.auth-subtitle {
			color: #888;
			margin-bottom: 88rpx;
			font-size: 28rpx;
		}

		.login-btn {
			padding: 0 20rpx;

			.button {
				height: 88rpx;
				line-height: 88rpx;
				background: #04be01;
				color: #fff;
				font-size: 30rpx;
				border-radius: 999rpx;
				text-align: center;
			}
		}

		.no-login-btn {
			margin-top: 20rpx;
			padding: 0 20rpx;

			.button {
				height: 88rpx;
				line-height: 88rpx;
				background: #dfdfdf;
				color: #fff;
				font-size: 30rpx;
				border-radius: 999rpx;
				text-align: center;
			}
		}

		.container__inner {
			display: block;
			text-align: center;
			padding: 200rpx 60rpx;

			.container__tip {
				margin-top: 40rpx;
			}
		}

		.container__ops {
			padding: 100rpx 60rpx;
		}
	}
</style>
